<!--
 * @Author: yangfeixiang 842931716@qq.com
 * @Date: 2022-09-22 10:54:11
 * @LastEditors: yangfeixiang 842931716@qq.com
 * @LastEditTime: 2022-10-11 10:11:25
 * @FilePath: \wework\wework\src\pages\wework\marketingplan\addSop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tablediv">
    <div style="padding: 7px 15px;border-bottom: 1px solid #eee;margin-bottom: 10px;">任务基本信息</div>
    <div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="选择群聊" prop="name">
          <div>
            <el-radio-group v-model="ruleForm.group_type" class="ml-4">
            <el-radio :label="1" size="large">添加群聊</el-radio>
            <el-radio :label="2" size="large">筛选群聊</el-radio>
          </el-radio-group>
          </div>
          
          <div style="width: 100%;" v-if="ruleForm.group_type == '1'">
            <el-button type="primary" plain :icon="Plus" @click="editsopapi">添加群聊</el-button>
            <div >
              <el-tag
                  v-for="tag in group"
                  :key="tag.id"
                  class="mx-1"
                  closable
                  :disable-transitions="false"
                  @close="handleClosegroup(tag.chat_id)"
                  style="margin: 5px;"
                  size="large"
                >
                  {{ tag.name }}
                </el-tag>
            </div>
          </div>
          <div style="background-color:  #fbfbfb;padding: 15px;width: 98%;border-radius: 7px;" v-if="ruleForm.group_type == '2'">
            <div style="background-color:#d9ecff;">*当群聊符合触发条件将自动触发此群SOP</div>
            <div>
              <el-radio-group v-model="ruleForm.group_condition_type" class="ml-4" @click="dialogVisible=false">
                <el-radio :label="1" size="large">根据群标签</el-radio>
                <el-radio :label="2" size="large">根据新群聊</el-radio>
              </el-radio-group>
            </div>
            <div v-if="ruleForm.group_condition_type == '1'">
              <div style="margin-top: 10px;">
                群标签：<span>
                  <el-select v-model="ruleForm.group_condition_tag" multiple class="m-2" placeholder="Select"  @click="grouplabel()">
                    <el-option
                      v-for="item in taglist"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>

                </span>
              </div>
              <div>
                <el-tag
                  v-for="tag in taglist"
                  :key="tag.id"
                  class="mx-1"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag.id)"
                  style="margin: 5px;"
                  size="large"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
            </div>
           <div v-if="ruleForm.group_condition_type == '2'">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
            <el-form-item label="创建时间：" prop="name">
              <el-radio-group v-model="ruleForm.group_condition_new" class="ml-4">
                <div style="width:100%">
                  <el-radio :label="1">
                  <div >
                    从<el-date-picker
                      v-model="ruleForm.group_condition_new_start"
                      type="date"
                      placeholder="开始时间"
                      :disabled-date="disabledDate"
                      :shortcuts="shortcuts"
                      :size="size"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      style="margin-left: 7px;margin-right: 7px;"
                    />起所有创建的群聊
                  </div>
                </el-radio>
                </div>
                
                <el-radio :label="2">
                  <div>
                    从<el-date-picker
                      v-model="ruleForm.group_condition_new_end"
                      type="daterange"
                      unlink-panels
                      range-separator="To"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :shortcuts="shortcuts"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      :size="size"
                      style="margin-left: 7px;margin-right: 7px;"
                    />起所有创建的群聊
                  </div>
                </el-radio>
              </el-radio-group>
              </el-form-item>
            </el-form>
           </div>
           <div style="margin-top: 10px;">
                <span style="background-color:#d9ecff;padding: 3px 7px;">查看符合以上筛选规则的群聊数:<span style="color:#409EFF;cursor:pointer;" @click="labelshow" v-if="!dialogVisible">查看</span><span style="color:#409EFF;cursor:pointer;"  v-if="dialogVisible">共{{clustersconst}}条</span></span>
              </div>
          </div>
        </el-form-item>
        <el-form-item label="推送规则" prop="name">
          <div>
            <el-radio-group v-model="ruleForm.send_type" class="ml-4">
            <el-radio :label="1" size="large">定时推送</el-radio>
            <el-radio :label="2" size="large">周期推送</el-radio>
          </el-radio-group>
          </div>
          
          <div style="width: 100%;">
            设置推送周期及文案(设置规则后将会通过「wework」提醒群主发送推送内容) <span style="color:#409EFF">查看详情</span>
          </div>
          <div style="width: 100%;" v-if="ruleForm.send_type == 2">
            <el-form :model="form" label-width="90px">
              <el-form-item label="开始时间：">
                <el-radio-group v-model="ruleForm.send_starttime_type" class="ml-4">
                  <el-radio :label="1" size="large" style="width: 100%;">立即开始</el-radio>
                  <el-radio :label="2" size="large"><span >定时开始</span><span style="margin-left: 7px;">
                    <el-date-picker
                      v-model="ruleForm.send_starttime"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      type="date"
                      placeholder=""
                      :size="size"
                    />
                  </span></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="结束时间：">
                <el-radio-group v-model="ruleForm.send_endtime_type" class="ml-4">
                  <el-radio :label="1" size="large" style="width: 100%;">永久有效</el-radio>
                  <el-radio :label="2" size="large"><span >定时结束</span><span style="margin-left: 7px;">
                    <el-date-picker
                      v-model="ruleForm.send_endtime_date"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      type="date"
                      placeholder=""
                      :size="size"
                    />
                  </span>
                  <span style="margin-left: 7px;">
                    <!-- <el-time-picker v-model="ruleForm.send_endtime_time" value-format="hh:mm:ss" placeholder="" /> -->
                    <!-- <el-date-picker
                      v-model="ruleForm.send_endtime_time"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      type="date"
                      placeholder=""
                      :size="size"
                    /> -->
                    <el-time-picker
                      v-model="ruleForm.send_endtime_time"
                      arrow-control
                      value-format="HH:mm:ss"
                      placeholder=""
                    />
                  </span>
                </el-radio>
                <el-radio :label="3" size="large" style="width: 100%;">
                  <el-input
                    v-model="ruleForm.send_endtime_mouth"
                    placeholder=""
                    class="input-with-select"
                  >
                    <!-- <template #prepend>
                      <el-button :icon="Search" />
                    </template> -->
                    <template #append>
                      <el-select v-model="ruleForm.send_endtime_date_type" placeholder="" style="width: 115px">
                        <el-option label="天" value="1" />
                        <el-option label="周" value="2" />
                        <el-option label="月" value="3" />
                      </el-select>
                    </template>
                  </el-input>
                  <span style="margin-left: 7px;color: black;">
                    后结束
                  </span>
                </el-radio>
                </el-radio-group>
              </el-form-item>
              </el-form>
          </div>
          <div style="margin-top: 15px;">
            <div  :class="ruleselectingshow == index ? 'rule' :  'rules'" v-for="(item,index) in ruleForm.send_content" :key="index" style="margin-left: 10px;" @click="ruleselecting(index)">
              <div ><span class="rulename">{{item.name}}</span><span style="float: right;cursor:pointer;" @click="deletegui(index)"><el-icon><Close /></el-icon></span></div>
              <div style="color:#909399" v-if="ruleForm.send_type == 1">
                <el-icon style="margin-right: 7px;" ><Calendar /></el-icon>
                <!-- 加入规则{{item.size}}{{item.type == 1 ? '小时' :'天' }}{{item.time}}分钟后 -->
                <span v-if="item.type==1">加入规则{{item.size}}小时{{item.time}}分钟后</span>
                <span v-else-if="item.type==2">加入规则{{item.size}}天后</span>
                <span v-else-if="item.type==3">加入规则{{item.size}}周后周{{item.hour}}</span>
                <span v-else>加入规则</span>
              </div>
              <div v-if="ruleForm.send_type == 1">
                <span  v-if="item.type==1">--:--</span>
                <span  v-else-if="item.type==2" style="font-weight: 700;font-size: 20px;">{{item.time}}</span>
                <span  v-else-if="item.type==3" style="font-weight: 700;font-size: 20px;">{{item.time}}</span>
                <span v-else>09:00</span>
              </div>
              <div  v-if="ruleForm.send_type == 2">
                <div style="color:#909399" v-if="ruleForm.send_type == 2 && item.type==4"><el-icon style="margin-right: 7px;" ><Calendar /></el-icon>每天</div>
                <div style="color:#909399" v-else-if="ruleForm.send_type == 2 && item.type==5"><el-icon style="margin-right: 7px;" ><Calendar /></el-icon>每周，周{{item.hour}}</div>
                <div style="color:#909399" v-else-if="ruleForm.send_type == 2 && item.type==6"><el-icon style="margin-right: 7px;" ><Calendar /></el-icon>每月，{{item.hour}}号</div>
                <span v-else><el-icon style="margin-right: 7px;" ><Calendar /></el-icon>每天</span>
              </div>
              <div  v-if="ruleForm.send_type == 2">
                <div v-if="ruleForm.send_type == 2 && item.type==4" style="font-weight: 700;font-size: 20px;">{{item.time}}</div>
              <div v-else-if="ruleForm.send_type == 2 && item.type==5" style="font-weight: 700;font-size: 20px;">{{item.time}}</div>
              <div v-else-if="ruleForm.send_type == 2 && item.type==6" style="font-weight: 700;font-size: 20px;">{{item.time}}</div>
              <div v-else style="font-weight: 700;font-size: 20px;">09:00</div>
              </div>
              <!-- <div v-if="ruleForm.send_type == 2" style="font-weight: 700;font-size: 20px;">09:00</div> -->
              
            </div>
            <div  class="addrule" style="text-align: center;" @click="addrule">
              <!-- <div ><span class="rulename">规划一</span></div>
              <div style="color:#909399"><el-icon style="margin-right: 7px;"><Calendar /></el-icon>加入规则0小时30分钟后</div>
              <div>--:--</div> -->
              <div><el-icon><Plus /></el-icon></div>
              <div>添加规则</div>
            </div>
          </div>
          <div style="clear:both"></div>
         
        </el-form-item>
        <el-form-item  style="" >
          <div v-for="(item,index) in ruleForm.send_content" :key="index" style="background-color:  #fbfbfb;padding: 15px;width: 98%;">
            <div style="background-color:  #fbfbfb;padding: 15px;width: 98%;border-radius: 7px;" v-if="ruleselectingshow == index">
            <div class="form-classs">设置规则名称：</div>
            <div>
              <el-input v-model="item.name" placeholder="规则名称仅内部可见" style="width: 200px;margin-top: 10px;margin-bottom: 10px;" />
            </div>
            <div class="form-classs">设置发送时间：</div>
            <div style="margin-top: 10px;margin-bottom: 10px;">
              <span>加入规则</span>
              <span>
                <el-input v-model="item.size" placeholder="" style="width: 70px;margin-left: 7px;margin-right: 7px;" v-if="ruleForm.send_type == '1'" />
              </span>
              <span>
                 <el-select v-model="item.type" class="m-2" placeholder="" style="width: 90px;" v-if="ruleForm.send_type == '1'">
                    <el-option
                      label="小时"
                      value="1"
                    />
                    <el-option
                      label="天"
                      value="2"
                    />
                    <el-option
                      label="周"
                      value="3"
                    />
                  </el-select>
                  <el-select v-model="item.type" class="m-2" placeholder="" style="width: 90px;" v-if="ruleForm.send_type == '2'">
                    <el-option
                      label="天"
                      value="4"
                    />
                    <el-option
                      label="周"
                      value="5"
                    />
                    <el-option
                      label="月"
                      value="6"
                    />
                  </el-select>
                  
                </span>
                <span>
                  <el-select v-model="item.hour" class="m-2" placeholder="Select" style="width: 90px;" v-if="ruleForm.send_type == '1' && item.type == '3'">
                    <el-option
                      label="周一"
                      value="1"
                    />
                    <el-option
                      label="周二"
                      value="2"
                    />
                    <el-option
                      label="周三"
                      value="3"
                    />
                    <el-option
                      label="周四"
                      value="4"
                    />
                    <el-option
                      label="周五"
                      value="5"
                    />
                    <el-option
                      label="周六"
                      value="6"
                    />
                    <el-option
                      label="周日"
                      value="6"
                    />
                  </el-select>
                  <el-select v-model="item.hour" class="m-2" placeholder="Select" style="width: 90px;" v-if="ruleForm.send_type == '2' && item.type == '5'">
                    <el-option
                      label="周一"
                      value="1"
                    />
                    <el-option
                      label="周二"
                      value="2"
                    />
                    <el-option
                      label="周三"
                      value="3"
                    />
                    <el-option
                      label="周四"
                      value="4"
                    />
                    <el-option
                      label="周五"
                      value="5"
                    />
                    <el-option
                      label="周六"
                      value="6"
                    />
                    <el-option
                      label="周日"
                      value="6"
                    />
                  </el-select>
                  <el-select v-model="item.hour" class="m-2" placeholder="Select" style="width: 90px;" v-if="ruleForm.send_type == '2' && item.type == '6'">
                    <el-option
                      v-for="item in yue"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    />
                   
                  </el-select>
                </span>
                <span>
                  <el-select v-model="item.time" class="m-2" placeholder="" style="width: 90px;" v-if="ruleForm.send_type == '1' && item.type == '1'">
                    <el-option
                      v-for="item in 60"
                      :label="item"
                      :value="item"
                      :key="item"
                    />
                   
                  </el-select>
                  <el-time-picker v-model="item.time" placeholder="Arbitrary time" arrow-control value-format="HH:mm:ss" v-if="ruleForm.send_type == '1' && item.type == '2'" />
                  <el-time-picker v-model="item.time" placeholder="Arbitrary time" arrow-control value-format="HH:mm:ss" v-if="ruleForm.send_type == '1' && item.type == '3'" />
                  <el-time-picker v-model="item.time" placeholder="Arbitrary time" arrow-control value-format="HH:mm:ss" v-if="ruleForm.send_type == '2' " />
                </span>
                <span>分钟后，提醒发送</span>
            </div>
            <div class="form-classs">设置发送内容：</div>
            <div>
              <div v-for="(items,indexs) in item.content" :key="indexs">
                <span>{{'消息' + (indexs + 1)}}：</span>
                <!-- <el-checkbox v-model="checked1" label="文字" size="large" />
                <el-checkbox v-model="checked2" label="图片" size="large" />
                <el-checkbox v-model="checked2" label="链接" size="large" />
                <el-checkbox v-model="checked2" label="小程序" size="large" /> -->
                <el-radio-group v-model="items.type" class="ml-4">
                  <el-radio :label="1" size="large">文字</el-radio>
                  <el-radio :label="2" size="large">图片</el-radio>
                  <el-radio :label="3" size="large">链接</el-radio>
                  <!-- <el-radio :label="4" size="large">小程序</el-radio> -->
                </el-radio-group>
                <span style="float: right;cursor:pointer;margin-top: 5px;" @click="deletenei(index,indexs)"><el-icon><Delete /></el-icon></span>
                <div v-if="items.type == 1">
                  <el-input
                    v-model="items.text"
                    maxlength="500"
                    placeholder=""
                    show-word-limit
                    :rows="7"
                    type="textarea"
                  />
                </div>
                <div v-if="items.type == 2">
                  <el-button type="primary" @click="showDialog('1',items,index,indexs)" v-if="!items.url">添加图片</el-button>
                    <div v-if="items.url" style="margin-top: 15px;margin-bottom: 15px;">【图片】：{{items.title}}</div>
                    <el-button type="primary" @click="showDialog('1',items,index,indexs)" v-if="items.url">重新添加图片</el-button>
                </div>
                <div v-if="items.type == 3">
                  <el-button type="primary" @click="showDialog('2',items,index,indexs)" v-if="!items.link_title">添加链接</el-button>
                    <div v-if="items.link_title" style="margin-top: 15px;margin-bottom: 15px;">【链接】：{{items.link_title}}</div>
                    <el-button type="primary" @click="showDialog('2',items,index,indexs)" v-if="items.link_title">重新添加链接</el-button>
                </div>
                <div v-if="items.type == 4">
                  <el-button type="primary" @click="showDialog('3',items,index,indexs)" v-if="!items.miniprogram_title">添加小程序</el-button>
                    <div v-if="items.miniprogram_title" style="margin-top: 15px;margin-bottom: 15px;">【小程序】：{{items.miniprogram_title}}</div>
                    <el-button type="primary" @click="showDialog('3',items,index,indexs)" v-if="items.miniprogram_title">重新添加小程序</el-button>
                </div>
               
              </div>
              <div style="margin-top: 15px;">
                  <el-button type="primary" @click="addcontent(index,indexs)">添加发送内容</el-button>
                </div>
            </div>
          </div>
          </div>
          
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 30px;">
      <el-button type="primary" @click="addapi()">创建</el-button>
    </div>
   
  </div>
  <editsop ref="edit" :groupchatapi="groupchatapi"></editsop>
  <labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
  <EditImg  @getDialogueData="getDialogueData($event, val)" ref="editImg" />
		<EditLink  @getDialogueData="getDialogueData($event, val)" ref="editLink" />
		<EditMiniprogram
			
			@getChooseData="getDialogueData($event, val)"
			ref="editMiniprogram"
		/>
</template>
<script setup>
import { ref,reactive,onMounted } from "vue";
import { Plus,Calendar,Search } from '@element-plus/icons-vue'

import editsop from '../../../components/app/groupchat.vue'
import labels from '../../../components/app/label.vue'
import EditImg from '../customeroperations/edit/welcome/editImg.vue'
import EditLink from '../customeroperations/edit/welcome/editLink.vue'
import EditMiniprogram from '../customeroperations/edit/welcome/EditApplet.vue'
import {userSopSize,userSopGroupadd,userSopGroupdetail} from '@/api'
import { useRoute, useRouter } from 'vue-router'
const router = useRoute()
const routers = useRouter()
const edit = ref(null)
const TestRef = ref()
const editImg = ref()
const editMiniprogram = ref()
const editLink = ref()
const openingDialogName = ref()
const editImgindex = ref()
const ruleselectingshow=ref(0)
const id = ref(router.query.id)
onMounted(()=>{
  if(router.query.id){
    console.log('编辑')
    userSopGroupdetail({id:id.value}).then(res=>{
      ruleForm.name=res.data.name
      ruleForm.groupid=res.data.groupid
      ruleForm.group_type=res.data.group_type
      ruleForm.group_condition_type=res.data.group_condition_type
      ruleForm.group_condition_tag=res.data.group_condition_tag
      ruleForm.group_condition_new=res.data.group_condition_new
      ruleForm.group_condition_new_start=res.data.group_condition_new_start
      ruleForm.group_condition_new_end=res.data.group_condition_new_end
      ruleForm.send_type=res.data.send_type
      ruleForm.send_content=res.data.send_content
      ruleForm.send_starttime_type=res.data.send_starttime_type
      ruleForm.send_starttime=res.data.send_starttime
      ruleForm.send_endtime_type=res.data.send_endtime_type
      ruleForm.send_endtime_date=res.data.send_endtime_date
      ruleForm.send_endtime_time=res.data.send_endtime_time
      ruleForm.send_endtime_mouth=res.data.send_endtime_mouth
      group.value=res.data.group_list
      taglist.value=res.data.group_condition_tag_list
    })
  }else{
    console.log('新增')
  }
})
const deletegui=(val)=>{
  
  if(ruleForm.send_content.length == 1){

  }else{
    ruleForm.send_content.splice(val,1)
    ruleselectingshow.value=1
  }
}
const deletenei = (index,indexs)=>{
  if(ruleForm.send_content[index].content.length == 1){

  }else{
    ruleForm.send_content[index].content.splice(indexs,1)
  }
}
const addapi=()=>{
  console.log(ruleForm)
  if(router.query.id){
    ruleForm.id = id.value
    userSopGroupadd(ruleForm).then(res=>{
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    routers.push({ path: 'groupSop' })
  })
  }else{
    userSopGroupadd(ruleForm).then(res=>{
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    routers.push({ path: 'groupSop' })
  })
  }
  
}
const addcontent=(index,indexs)=>{
  const data={
        type:1,
        title:'',
        url:'',
        link_title:'',
        link_picurl:'',
        link_desc:'',
        link_url:'',
        miniprogram_title:'',
        miniprogram_imgurl:'',
        miniprogram_appid:'',
        miniprogram_page:'',
        type:1
      }
  ruleForm.send_content[index].content.push(data)
  console.log(ruleForm.send_content[index].content[indexs])
}
const ruleselecting = (val)=>{
  ruleselectingshow.value=val
}
const addrule=()=>{
  var data = {
    name:' ',
    content:[
      {
        type:1,
        hour:4,
        title:'',
        url:'',
        link_title:'',
        link_picurl:'',
        link_desc:'',
        link_url:'',
        miniprogram_title:'',
        miniprogram_imgurl:'',
        miniprogram_appid:'',
        miniprogram_page:'',
      }
    ]
  }
  var name = '规则' + (ruleForm.send_content.length + 1)
  data.name = name
  ruleForm.send_content.push(data)
}
const indes=ref(1)
const showDialog = (type,val, index,indexs) => {
	openingDialogName.value = type
	console.log('图片', val)
		editImgindex.value=index
    indes.value=indexs
	switch (type) {
		case '1':
			console.log('传入图片', val)
			editImg.value.show(type, val)
			break
		case '2':
			console.log('传入链接', type, val)
			editLink.value.show(type, val)
			break
		case '3':
			editMiniprogram.value.show(type, val)
			break
	}
}
const getDialogueData = (val) => {
  console.log(val)
  if(val.type == 1){
    ruleForm.send_content[editImgindex.value].content[indes.value].title=val.title
    ruleForm.send_content[editImgindex.value].content[indes.value].url=val.url
  }else if(val.type == 2){
    ruleForm.send_content[editImgindex.value].content[indes.value].link_title=val.title
    ruleForm.send_content[editImgindex.value].content[indes.value].link_picurl=val.link_picurl
    ruleForm.send_content[editImgindex.value].content[indes.value].link_desc=val.link_desc
    ruleForm.send_content[editImgindex.value].content[indes.value].link_url=val.link_url
  }else{
    ruleForm.send_content[editImgindex.value].content[indes.value].miniprogram_title=val.title
    ruleForm.send_content[editImgindex.value].content[indes.value].miniprogram_imgurl=val.imgurl
    ruleForm.send_content[editImgindex.value].content[indes.value].miniprogram_appid=val.appId
    ruleForm.send_content[editImgindex.value].content[indes.value].miniprogram_page=val.miniprogram_page
  }
 console.log(ruleForm)
  
  
  
}
const yue = ref([
  {
    label:'1号',
    value:'1'
  },
  {
    label:'2号',
    value:'2'
  },
  {
    label:'3号',
    value:'3'
  },
  {
    label:'4号',
    value:'4'
  },
  {
    label:'5号',
    value:'5'
  },
  {
    label:'6号',
    value:'6'
  },
  {
    label:'7号',
    value:'7'
  },
  {
    label:'8号',
    value:'8'
  },
  {
    label:'9号',
    value:'9'
  },
  {
    label:'10号',
    value:'10'
  },
  {
    label:'11号',
    value:'11'
  },
  {
    label:'12号',
    value:'12'
  },
  {
    label:'13号',
    value:'13'
  },
  {
    label:'14号',
    value:'14'
  },
  {
    label:'15号',
    value:'15'
  },
  {
    label:'16号',
    value:'16'
  },
  {
    label:'17号',
    value:'17'
  },
  {
    label:'18号',
    value:'18'
  },
  {
    label:'19号',
    value:'19'
  },
  {
    label:'20号',
    value:'20'
  },
  {
    label:'21号',
    value:'21'
  },
  {
    label:'22号',
    value:'22'
  },
  {
    label:'23号',
    value:'23'
  },
  {
    label:'24号',
    value:'24'
  },
  {
    label:'25号',
    value:'25'
  },
  {
    label:'26号',
    value:'26'
  },
  {
    label:'27号',
    value:'27'
  },
  {
    label:'28号',
    value:'28'
  },
  {
    label:'29号',
    value:'29'
  },
  {
    label:'30号',
    value:'30'
  },
  {
    label:'31号',
    value:'31'
  },
])
const ruleForm = reactive({
  name: '',
  send_type:1,
  group_condition_type:1,
  send_endtime_type:1,
  send_starttime_type:1,
  group_condition_new:1,
  group_type:1,
  send_content:[{
    name:'规则1',
    content:[
      {
        type:1,
        title:'',
        url:'',
        link_title:'',
        link_picurl:'',
        link_desc:'',
        link_url:'',
        miniprogram_title:'',
        miniprogram_imgurl:'',
        miniprogram_appid:'',
        miniprogram_page:'',
      }
    ]
  }],
  
 
 
 
  resource: '',
  desc: '',
 
})
const grouplabel = ()=>{
  var data = {
		show: true,
		type: 1
	}
	TestRef.value.tableshow(data)
}
const group = ref([])
const groupchatapi=(val)=>{
  console.log(val._value)
  ruleForm.groupid=[]
  group.value=val._value

  for(var i = 0;i<val._value.length;i++){
    ruleForm.groupid.push(val._value[i].chat_id)
  }
}
const taglist=ref([])
const labeldataapi = (val) => {
  console.log(val);
  taglist.value=val.list
  ruleForm.group_condition_tag=val.id
}
const handleClosegroup=(val)=>{
  for(var i =0;i<ruleForm.groupid.length;i++){
    if(ruleForm.groupid[i] == val){
      ruleForm.groupid.splice(i,1)
    }
  }
  for(var i =0;i<group.value.length;i++){
    if(group.value[i].chat_id == val){
      group.value.splice(i,1)
    }
  }
}
const handleClose=(val)=>{
  for(var i =0;i<ruleForm.group_condition_tag.length;i++){
    if(ruleForm.group_condition_tag[i] == val){
      ruleForm.group_condition_tag.splice(i,1)
    }
  }
  for(var i =0;i<taglist.value.length;i++){
    if(taglist.value[i].id == val){
      taglist.value.splice(i,1)
    }
  }
}
const labeldata = ref([
  {
    name:'都逛逛',
    value:[
      {
        id:1,
        name:'测试'
      },
      {
        id:2,
        name:'11'
      },
      {
        id:3,
        name:'发广告'
      }
    ]
  },
  {
    name:'测试',
    value:[
      {
        id:1,
        name:'测试'
      }
     
    ]
  }
])
const labelvalue=ref(1)
const radio1 =ref('1')
const radio2 = ref('2')
const dialogVisible = ref(false)
const clustersconst=ref()
const labelshow=()=>{
  // dialogVisible.value=true
  userSopSize({type:ruleForm.group_condition_type,tags:ruleForm.group_condition_tag,ktime:ruleForm.group_condition_new==1 ? ruleForm.group_condition_new_start : '',times:ruleForm.group_condition_new==2 ? ruleForm.group_condition_new_end : ''}).then(res=>{
    clustersconst.value=res.data
    dialogVisible.value=true
  })
}
const labelxuan=(val)=>{
  labelvalue.value=val
}
const editsopapi =(val)=>{
  var data = {
    show:true,
    id:val,
    name:val.name
  }
  edit.value.addapi(data)
}
</script>
<style>
  .labelindex{
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #eee;
    margin: 5px 5px 0 0;
  }
  .label-bagc{
    background-color: #409EFF;
    color:#fff;
  }
  .label{
    width: 50%;
    display: inline-block;
    border: 1px solid #eee;
    /* border-radius: 3px; */
    text-align: center;
    padding: 5px 0;
    cursor:pointer;
  }
  .form-classs{
    padding-left: 5px;
    border-left: 5px solid #409EFF;
    color: #000000;
    font-weight: 600;
  }
  .tablediv{
  background-color: #fff;
  margin: 15px;
}
.rule{
  float: left;
  width: 250px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  border-left: 4px solid  #79bbff;
  background-color: #d9ecff;
  display: inline-block;
}
.rules{
  float: left;
  width: 250px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  /* border-left: 4px solid  #79bbff;
  background-color: #d9ecff; */
  display: inline-block;
}
.rulename{
  background-color: #c6e2ff;
  color: #409EFF;
  
}
.addrule{
  float: left;
  width: 250px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  height: 120px;
  padding-top: 25px;
  margin-left: 10px;
}
</style>